<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示页面</title>
    <script src="js/jquery-2.2.3.min.js"></script>
</head>
<body>

<label>姓名：<input name="ename" id="ename"/></label>

<label>状态：<select id="op" name="options">
    <option value="-1">-请选择-</option>
</select></label>
<input type="submit" value="查询" id="sub"/><br><br>

<input type="submit" id="dels" value="批量删除"/><br>
<table width="1000" border="1">
    <thead>
    <tr>
        <th><input type="checkbox" name="box" onclick="batchdel()"/></th>
        <th>编号</th>
        <th>头像</th>
        <th>姓名</th>
        <th>性别</th>
        <th>学历</th>
        <th>年龄</th>
        <th>联系电话</th>
        <th>邮箱</th>
        <th>面试官</th>
        <th>状态</th>
        <th>操作</th>
        <!--<td><img src="image/head.png" width="40"/></td>-->
    </tr>
    </thead>
    <tbody>


    </tbody>
</table>
<span>第<span id="span"></span>页</span>
<div>

</div>
<h2 style="color: red"></h2>
</body>
</html>

<script>

    // ajax()请求模糊查询下拉选框数据
    $.ajax({
        url: "applicant/findStatus.do",
        success: function (resp) {
            $.each(resp, function (r, a) {
                var option = `<option value="${a.status}">${a.statuStr}</option>`
                $("#op").append(option)
            })
        }
    })

    ajax()

    <!--ajax请求列表页面参数-->
    function ajax(pn) {
        if (pn == null) {
            pn = 1
        }
        $.ajax({
            url: "applicant/list.do",
            data: {
                page: pn,
                pageSize: 2
            },
            success: function (resp) {
                var tr = ''
                $.each(resp.list, function (index, applicant) {
                    //注意清空div标签内的分页数据，然后重新添加
                    $("div").empty()
                    var inters = ''
                    $.each(applicant.interviewers, function (i, interviewer) {
                        inters += interviewer.name + ' '
                    })
                    tr += `<tr>
                                <td><input type="checkbox" id="box"/></td>
                                <td>${applicant.eid}</td>
                                <td><img src="${applicant.photo}" width="40"/></td>
                                <td>${applicant.ename}</td>
                                <td>${applicant.sex}</td>
                                <td>${applicant.education}</td>
                                <td>${applicant.age}</td>
                                <td>${applicant.phoneNum}</td>
                                <td>${applicant.email}</td>
                                <td>${inters}</td>
                                <td>${applicant.statuStr}</td>
                                <td><a href="javascript:del(${applicant.eid})">删除</a> <a href="edit.html?id=${applicant.eid}">修改</a></td>
                              </tr>`
                })
                $("tbody").html(tr)

                //找到span标签填入分页数据
                $("#span").html(resp.pageNum + '/' + resp.pages)

                // 进入上一页、下一页、首页和尾页
                var page = `
                            <a href="javascript:ajax(1)">首页</a>
                            <a href="javascript:ajax(${resp.pageNum - 1})">上一页</a>
                            <a href="javascript:ajax(${resp.pageNum + 1})" >下一页</a>
                            <a href="javascript:ajax(${resp.pages})">尾页</a>
                            `
                $("div").append(page)
            }
        })
    }

    //根据id删除单条数据
    function del(id) {
        $.ajax({
            url: "applicant/del.do",
            data: {
                eid: id
            },
            success: function (resp) {
                if (resp == '1') {
                    location.href = "list.html"
                } else {
                    $("h2").text("删除失败")
                }
            }
        })
    }


    // 点击查询按钮实现条件查询
    $("#sub").click(function () {
        // 点击按钮手机表单数据
        var ename = $("#ename").val()
        var status = $("#op").val()
        if (status == -1 && ename == '') {
            alert("条件不能为空")
        } else {
            //发送ajax请求
            $.ajax({
                url: "applicant/findByCondition.do",
                method: "post",
                data: {
                    ename: ename,
                    status: status
                },
                success: function (resp) {
                    // 先清空后再添加
                    $("tbody").empty()
                    $.each(resp, function (i, applicant) {
                        var inters = ''
                        $.each(applicant.interviewers, function (y, z) {
                            inters += z.name + ' '
                        })
                        var tr = `<tr>
                                <td><input type="checkbox" id="box"/></td>
                                <td>${applicant.eid}</td>
                                <td><img src="${applicant.photo}" width="40"/></td>
                                <td>${applicant.ename}</td>
                                <td>${applicant.sex}</td>
                                <td>${applicant.education}</td>
                                <td>${applicant.age}</td>
                                <td>${applicant.phoneNum}</td>
                                <td>${applicant.email}</td>
                                <td>${inters}</td>
                                <td>${applicant.statuStr}</td>
                                <td><a href="javascript:del(${applicant.eid})">删除</a> <a href="edit.html?id=${applicant.eid}">修改</a></td>
                              </tr>`
                        $("tbody").append(tr)
                    })
                }
            })
        }
    })

    //根据多选框实现批量删除
    if ($("input[name='box']").is('checked') == true) {
        $("input[id='box']").each(function () {
            $(this).prop("checked", true);
        });
    } else {
        $('input[id="box"]').each(function () {
            $(this).prop("checked", false);
        });
    }

    $("#dels").click(function () {
        del()

        function del() {
            // 获取已经勾选的复选框
            var arrs = new Array();
            $('input[id="box"]:checked').each(function () {
                if (!isNaN($(this).val())) {
                    arrs.push($(this).val())
                } else {
                    alert("拿不到");
                }
            });
            if (arrs.length == 0) {
                alert("请选择要删除的信息！")
                return false;
            }
            console.log("拿到的数组为：" + arrs)
            console.log("拿到的字符串为：" + arrs.toString())
            // 进行批量删除的操作
            $.ajax({
                type: "post",
                url: "applicant/batchDelete.do",
                data: {
                    ids: arrs.toString()
                },
                success: function (data) {
                    // 重新刷新页面
                    location.reload()
                },
                error: function () {
                    alert("请求失败")
                }
            });
        }
    })

</script>
